<template>
	<view class="guqing-eedit">
		<u-navbar @leftClick="leftClick" leftIconColor="#fff" :titleStyle="{ color: '#fff' }" :title="(form.id ? '编辑' : '新增') + '沽清'" :placeholder="true" />
		<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="uForm">
			<u-form-item label="菜品名字:" prop="foodName" ref="foodName" :borderBottom="false">
				<u-input disabled :customStyle="{ height: '12px' }" v-model="form.foodName">
					<template slot="suffix">
						<u-icon @click="searchFoods" name="search" color="#f3c45d" size="28"></u-icon>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="类型设置:" prop="soldoutType" ref="item1" :borderBottom="false">
				<u-radio-group v-model="form.soldoutType">
					<u-radio
						:customStyle="{ marginLeft: '8px' }"
						v-for="(item, index) in soldoutTypeEnum"
						:key="iten.text"
						:label="item.text"
						:name="item.value"
						:value="item.value"
						activeColor="#f3c45d"
					></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="执行频率:" prop="autoSoldout" ref="item1" :borderBottom="false">
				<u-radio-group v-model="form.autoSoldout" @chnage="onChangeAutoSoldout">
					<u-radio
						:customStyle="{ marginLeft: '8px' }"
						v-for="(item, index) in autoSoldoutTypeEnum"
						:key="iten.text"
						:label="item.text"
						:name="item.value"
						:value="item.value"
						activeColor="#f3c45d"
					></u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item :label="(form.soldoutType === 1 ? '本班次' : '今日') + '可售：'" prop="soldout" ref="item1" :borderBottom="false">
				<u--input type="number" v-model="form.soldout" />
			</u-form-item>

			<u-form-item v-if="!form.autoSoldout" :label="(form.soldoutType === 1 ? '每班次' : '每日') + '可售：'" prop="recoveryQty" :borderBottom="false">
				<u--input type="number" v-model="form.recoveryQty" />
			</u-form-item>
			<u-form-item>
				<view style="margin-top: 80rpx">
					<u-button :disabled="lock" type="primary" @click="submit">保存</u-button>
				</view>
			</u-form-item>
		</u--form>

		<u-popup :show="showAddFood" @close="showAddFood = false" @open="showAddFood = true" :closeable="true">
			<view class="layout" style="height: 90vh; width: 100vw; background-color: #f7f8fa; font-size: 12px; display: flex">
				<view class="layout-left" style="height: 100%; width: 40vw; overflow-y: scroll">
					<view style="margin: 15rpx; background-color: #fff; border-radius: 10px; padding: 8px 4px" v-for="(item, index) in foodCategoryList" :key="item.id">
						<view class="fold" style="padding: 15rpx 15rpx 15rpx 0">
							<view class="tree-icon" style="margin: 0 5px" v-show="item.fold && item.children.length > 0" @click="unfold(index)">
								<!-- 向右箭头 -->
								<image style="width: 8px; height: 8px" src="/static/images/icon/down.png"></image>
							</view>
							<view @click="unfold(index)" style="margin: 0 5px" class="tree-icon" v-show="!item.fold && item.children.length > 0">
								<!-- 向下箭头 -->
								<image style="width: 8px; height: 8px" src="/static/images/icon/right.png"></image>
							</view>
							<view
								:style="{
									color: foodCategoryId == item.id ? '#f3c45d' : '#000',
									paddingLeft: item.children.length == 0 ? '20px' : '0px'
								}"
								@click="onItemClick(item)"
							>
								{{ item.name }}
							</view>
						</view>
						<block v-if="item.fold">
							<view v-for="(item1, index1) in item.children" class="subtree" :key="item1.id" style="display: flex; padding: 15rpx 15rpx 15rpx 0">
								<view
									class="tree-content"
									style="padding-left: 30px; padding-right: 20rpx"
									:style="{
										color: foodCategoryId == item1.id ? '#f3c45d' : '#000'
									}"
									@click="onItemClick(item1)"
								>
									<text>{{ item1.name }}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="layout-right" style="height: 100%; width: 60vw; overflow-y: scroll; padding-top: 40px">
					<block v-if="foodList != null && foodList.length > 0">
						<view class="food-items" style="font-size: 12px" v-for="(food, index) in foodList" :key="index">
							<image class="image" :src="food.image" style="align-self: center" />
							<view class="right" style="padding-bottom: 0">
								<text>名称：{{ food.name }}</text>
								<view class="mt-10">
									<text style="border: 1px solid #f7f8fa">规格：{{ food.foodSpecName }}</text>
								</view>
								<view class="mt-10">
									<text>价格：</text>
									<text class="text-red">￥{{ food.posPrice }}</text>
								</view>
							</view>
							<view class="btn" style="display: flex; align-items: center">
								<text style="padding: 3px 5px; border-radius: 8px; background-color: #f3c45d; color: #fff" @click="showfoodDetailModal(food)">选择</text>
							</view>
						</view>
					</block>
					<block v-else>
						<view style="display: flex; height: 100%; justify-content: center; justify-content: center">
							<u-empty />
						</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { guqingTypeEnum1, frequencyEnum } from '@/constants/normalConstants';
import { GetFoodCategoryList, GetFood } from '../../../common/api.js';
export default {
	data() {
		return {
			lock: false,
			form: {
				soldoutType: 1,
				autoSoldout: 1
			},
			tabId: 1,
			rules: {
				foodName: [{ required: true, message: '请选择菜品' }],
				soldout: [
					{ type: 'number', required: true, message: '请填写可售数量', trigger: ['blur', 'change'] },
					{
						validator: (rules, value, callback) => {
							if (isNaN(Number(value))) {
								callback(new Error('请输入正确的值'));
							} else {
								if (Number(value) < this.form.soldout) {
									callback(new Error('每班次或当日数量不能大于班次或者当天数量'));
								}
								callback();
							}
						}
					}
				],
				recoveryQty: [
					// { type: 'number', required: !this.form.autoSoldout ? true : false, message: '请填写可售数量', trigger: ['blur', 'change'] },
					{
						validator: (rules, value, callback) => {
							if (isNaN(Number(value))) {
								callback(new Error('请输入正确的值'));
							} else {
								if (Number(value) < this.form.soldout) {
									callback(new Error('每班次或当日数量不能大于班次或者当天数量'));
								}
								callback();
							}
						},
						trigger: ['blur', 'change']
					}
				]
			},
			show: false,
			soldoutTypeEnum: guqingTypeEnum1,
			autoSoldoutTypeEnum: frequencyEnum,
			showAddFood: false, // 展示菜品弹框
			foodCategoryList: [],
			foodList: [],
			foodCategoryId: 0 // Food Category Id
		};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad({ form, curCataIdx }) {
		if (form) {
			this.form = JSON.parse(form);
		} else {
			if (+curCataIdx) {
				this.form.soldoutType = +curCataIdx;
			} else {
				this.form.soldoutType = 1;
			}
		}
	},
	methods: {
		async getFoodCategoryList() {
			this.foodCategoryList = (await GetFoodCategoryList()).data.list;
			this.foodCategoryList.forEach((element) => {
				element.label = element.name;
				element.fold = true;
				element.active = false;
				if (element.children.length > 0) {
					element.children.map((item) => {
						item.label = item.name;
						item.fold = true;
					});
				}
			});
		},
		async getFoodList(categoryId) {
			const res = await GetFood({
				pageNum: 1,
				pageSize: 9999,
				foodCategoryId: categoryId ? categoryId : this.foodCategoryList[0].id
			});
			this.foodList = res.data.list.filter((item) => item.type == 1);
		},
		async searchFoods() {
			await this.getFoodCategoryList();
			this.foodCategoryId = this.foodCategoryList[0].id;
			this.getFoodList();
			this.showAddFood = true;
		},
		onItemClick(item) {
			// 点击分类
			if (this.foodCategoryId == item.id) return;
			this.getFoodList(item.id);
			this.foodCategoryId = item.id;
		},
		showfoodDetailModal(foodItem) {
			// 选中菜品id
			console.log(foodItem);
			this.form.foodName = foodItem.name;
			this.form.foodSpecId = foodItem.foodSpecId;
			this.form.SpecName = foodItem.foodSpecName;
			this.form.foodId = foodItem.id;
			this.showAddFood = false;
			this.$refs.uForm.validateField('name');
		},
		onChangeAutoSoldout() {
			// 更改执行频率
			this.form.recoveryQty = 0;
		},
		async submit() {
			await this.$refs.uForm.validate();
			this.lock = true;
			try {
				if (this.form.id) {
					await this.$api.editGuqingAPI(this.form);
				} else {
					await this.$api.addGuqingAPI(this.form);
				}
				uni.showToast({
					title: '保存成功'
				});
				setTimeout(() => {
					uni.reLaunch({
						url: `/pages/workbench/guqing/list`
					});
				}, 1000);
				this.lock = true;
			} catch (e) {
				console.log(e);
				//TODO handle the exception
				this.lock = true;
			}
		},
		leftClick() {
			uni.redirectTo({
				url: `/pages/workbench/guqing/list`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.guqing-eedit {
	padding: 20rpx;
	.form-item {
		display: flex;
		align-items: center;
		padding: 14rpx 0;

		.lbl {
			width: 80px;
			font-size: 14px;
		}

		.lbl-title {
			font-weight: 600;
			flex: unset;
			font-size: 16px;
			flex: 1;
			width: fit-content;
		}

		.form-item-right {
			flex: 1;

			.close-icon {
				position: absolute;
				top: -10px;
				left: 190px;
			}
		}

		.tree,
		picker {
			flex: 1;
			border: 1px solid #cacaca;
			background-color: #fff;
			padding: 7rpx 10rpx;
			border-radius: 5px;
			position: relative;
		}
	}

	.img {
		width: 20px;
		height: 20px;
	}

	.fold {
		display: flex;
	}

	.food-items {
		display: flex;
		padding: 5px;
		border: 1px solid #cacaca;
		border-radius: 8px;
		margin-bottom: 10px;
		margin-right: 10px;
		margin-left: 10px;
		.image {
			width: 160rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			background-color: $bg-color-grey;
		}

		.right {
			flex: 1;
			// height: 160rpx;
			// overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 1px #f8f8f8 solid;
			padding-bottom: 20rpx;

			.label {
				display: flex;
				margin-top: 10rpx;

				text {
					display: inline-block;
					padding: 0 8rpx;
					font-size: 20rpx;
					border: 1px #f3c45d solid;
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
			}

			.btn {
				display: flex;
				margin-top: 10rpx;

				text {
					display: inline-block;
					padding: 4rpx 16rpx;
					font-size: 24rpx;
					border: 1px #333 solid;
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>
